<template>
	<view>
		<view class="top-back">
			<view class="top-name">
				<view :class="topselect == 1?'top-selected':'top-select'" @click="clickPopSelect(1)">关于我们</view>
				<view :class="topselect == 2?'top-selected':'top-select'" @click="clickPopSelect(2)">联系我们
				</view>
			</view>

		</view>
		<scroll-view class="center-back" scroll-y="true">
			<myEditor v-show="topselect == 1" :editorDetail='aboutUs.intro' @getContents="getContents"></myEditor>
			<myEditor v-show="topselect == 2" :editorDetail='contactUs.intro' @getContents="getcontactUsContents">
			</myEditor>
		</scroll-view>

		<view class="bottom-btn" @click="saveAction">保存</view>
	</view>
</template>

<script>
	import myEditor from "@/packageB/PC/editor/editor.vue"

	export default {
		components: {
			myEditor
		},
		data() {
			return {
				topselect: 1,
				aboutUs: {},
				contactUs: {}
			}

		},
		mounted() {
			this.requestInfoData();
			this.requestContactData();
		},
		methods: {
			//信息网络请求
			async requestInfoData() {
				let _this = this
				const res = await this.$myRequest({
					url: '/admin/news/aboutUs',
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.aboutUs = res.data.data;

				}
			},
			//联系我们信息网络请求
			async requestContactData() {
				let _this = this
				const res = await this.$myRequest({
					url: '/admin/news/contactUs',
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.contactUs = res.data.data;
				}
			},

			async saveAction() {	
				if((this.topselect == 1 && this.aboutUs.intro == '<p><br></p>') || (this.topselect == 2 && this.contactUs.intro == '<p><br></p>')){
					uni.showToast({
						title:'请填写内容',
						icon:'none'
					})
					return;
				}
				let _this = this
				var parms = {
					'id': this.aboutUs.id,
					'intro': this.aboutUs.intro
				}
				if (this.topselect == 2) {
					parms = {
						'id': this.contactUs.id,
						'intro': this.contactUs.intro
					}
				}
				const res = await this.$myRequest({
					url: "/admin/news",
					method: 'PUT',
					data: parms
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '编辑成功'
					})
				}
			},
			//编辑器赋值
			getContents(html) {
				this.aboutUs.intro = html;
				console.log(this.aboutUs.intro)
			},

			getcontactUsContents(html) {
				this.contactUs.intro = html;
				console.log(this.aboutUs.intro)
			},

			clickPopSelect(index) {
				this.topselect = index;
				console.log(this.topselect)
				console.log(this.aboutUs, this.contactUs)
			},

		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
		display: flex;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}





	.top-selected {
		cursor: pointer;
		font-size: 18px;
		font-weight: normal;
		color: #2DA9C5;
		border-bottom: #2DA9C5 1px solid;
		height: 35px;
		width: 75px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 40px;
	}

	.top-select {
		font-size: 18px;
		font-weight: normal;
		color: #333;
cursor: pointer;
		height: 35px;
		width: 75px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 40px;
	}

	.top-exit {
		width: 56px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.topselect-back {
		display: flex;
		margin-left: 40px;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.top-btn-selected {
		width: 76px;
		height: 24px;
		background: #E8F7FB;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #2DA9C5;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-btn-select {
		width: 76px;
		height: 24px;
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center-back {
		margin-left: 5%;
		border: 1px solid #eee;
		border-radius: 5px;
		width: 90%;
		min-height: 500px;
	}

	.bottom-btn {
		cursor: pointer;
		margin-left: 40px;
		margin-top: 20px;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
